<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星星点灯</title>
  <meta name="description" content="星星点灯网，致力于关爱自闭症人群">
  <meta name="keywords" content="自闭症，关爱，志愿者">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/head.css">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
   <!-- 头部 -->
   <header id="head">
    <!-- 快捷菜单  -->
    <div class="post-shortcut">
        <nav class="container">
            <div class="logo fl">
            </div>
            <ul class="left fl">
                <li><a href="#">活动</a></li>
                <li>|<a href="./post.html">论坛</a></li>
                <li>|<a href="#">义卖</a></li>
            </ul>
            <ul class="right fr">
                <li v-if="isLoad" @click="load"><a href="#">未登录</a>|</li>
                <li v-if="!isLoad"><a href="#"><div class="ava"><img src="./uploads/ava.jpg" alt="" @mouseover="cardLoad" :class="!cardShow?'small':'big'"></div></a><span>吃果冻</span>|</li>
                <li v-if="!isLoad" @click="load"><a href="#">退出登录</a>|</li>
                <li v-if="!isLoad"><a href="#">个人主页</a>|</li>
                <li><a href="#">客服</a></li>
            </ul>
        </nav>
    </div>
    <div class="card"  v-if="cardShow" @mouseleave="cardLoad">
        <ul>
            <li>监护人</li>
            <li><a href="#">收到的消息</a></li>
            <li><a href="#">收到的回复</a></li>
            <li><a href="#">待办的活动</a></li>
        </ul>
    </div>
</header>
<script src="./js/head.js" type="text/javascript"></script>
</body>
</html>